<script setup>
import { inject } from "vue"
const globalVars = inject("globalVars")
</script>
<template>
    <div>
        <div class="page_content f_col">
            <h2 class="title1">T2工具集</h2>
            <h3 class="title2">数据处理</h3>
            <a-flex wrap="wrap" gap="small">
                <a-button type="text" class="btext" @click="globalVars.addPane('dobase64', 'BASE64编码')"
                    >BASE64编码</a-button
                >
                <a-button type="text" class="btext" @click="globalVars.addPane('domd5', 'MD5编码')">MD5编码</a-button>
                <a-button type="text" class="btext" @click="globalVars.addPane('dotimestamp', '时间转换')"
                    >时间转换</a-button
                >
                <a-button type="text" class="btext" @click="globalVars.addPane('dourl', 'URL转换')">URL转换</a-button>
                <a-button type="text" class="btext" @click="globalVars.addPane('doaes', 'aes加解密')"
                    >aes加解密
                </a-button>

                <a-button type="text" class="btext" @click="globalVars.addPane('txtc', '文件比较')">文件比较</a-button>
                <a-button type="text" class="btext" @click="globalVars.addPane('jsonc', 'JSON比较')">JSON比较</a-button>
            </a-flex>
        </div>
    </div>
</template>
<style scoped>
:where(.page_content) {
    max-width: 860px;
    height: 100%;
    overflow: auto;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin: 0 auto !important;
    padding: 24px;
}

:where(.title1) {
    padding: 16px 0;
    color: var(--character-85);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

:where(.title2) {
    padding: 12px 0;
    color: var(--character-75);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
}

:where(.btext) {
    color: var(--character-75) !important;
    background: var(--Neutral-11) !important;
    border: 1px solid var(--Neutral-9) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    height: auto !important;
    transition: all 0.3s ease !important;
}

:where(.btext:hover) {
    color: var(--character-85) !important;
    background: var(--Neutral-10) !important;
    border-color: var(--Neutral-8) !important;
    transform: translateY(-1px);
}

:where(.btext:active) {
    transform: translateY(0);
}

/* 添加工具按钮组的样式 */
:where(.a-flex) {
    background: var(--Neutral-12);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--Neutral-10);
}
</style>
